import React, { useEffect } from 'react';
import Controls from 'Controls';
import Components from 'Components';
import { Common } from 'UtilsCommon';
import Base from './base';
import aopc from 'aopc';
import { Icon } from 'Configs';

const getComponent = (type, props) => {
    if (!type || type === 'ThemeView') return null;

    try {
        let pageComponent = aopc.getComponent(type);
        if (pageComponent === null) pageComponent = require(`../page-components/${type}`).default;
        if (pageComponent) return React.createElement(pageComponent, props);
        return null;
    }
    catch (err) {
        console.warn('components/propertyItem/getComponent', err);
        return null;
    }
};

const createComponent = (type, props) => {
    if (Components[type]) return React.createElement(Components[type], props);
    if (Controls[type]) return React.createElement(Controls[type], props);
    return getComponent(type, props);
};

// 设置显示权限
const getIsVisible = (property, pageAxis) => {
    let isVisible = property.isVisible !== false;

    // 判断是否有显示权限
    if (isVisible) isVisible = pageAxis.getRight(property.name);

    property.isVisible = isVisible;
};

const getReactComponent = (property, view, pageId) => {
    property.id = property.id || Common.createGuid();
    property.style = Common.getStyle(property.style);

    if (property.type === 'Icon') return <Icon type={property.typeName} color={property.color} fontSize={property.fontSize} />;

    const props = { property, key: property.id, view: view || {}, pageId };

    return createComponent(property.type, props);
};

const setPropertyValue = (obj, p, n) => {
    const valueName = p.inputType + 'Value';
    const value = p[valueName];
    if (p.inputType === 'style') {
        if (obj[n] === undefined) obj[n] = value;
        else if (Common.isObject(value)) {
            for (const key in value) {
                obj[n][key] = value[key];
            }
        }
    }
    else obj[n] = value;
};

const setThemeProperty = (property, p, pageAxis, parentName) => {
    const name = parentName ? `${parentName}/${property.name}` : property.name;

    const ns = p.name.split('.');
    if ((name + ".").indexOf(ns[0] + '.') >= 0) {
        let obj = property;
        if (ns.length === 1) {
            for (const key in p) {
                obj[key] = p[key];
            }
        } else {
            for (let i = 1; i < ns.length; i++) {
                const n = ns[i];
                if (i === ns.length - 1) {
                    setPropertyValue(obj, p, n);
                }
                else {
                    if (obj[n] === undefined) break;
                    obj = obj[n];
                }
            }
        }
        return;
    }

    if (property.properties) {
        property.properties.forEach(p2 => {
            setThemeProperty(p2, p, pageAxis, name);
        });
    }
};

const setTheme = (property, pageAxis) => {
    if (!property.properties || !property.isTheme || property.isSetTheme) return;
    const themeView = Common.arrayFirst(property.properties, item => item.type === 'ThemeView' && item.name === pageAxis.theme);
    if (themeView && themeView.properties) {
        themeView.properties.forEach(item => {
            setThemeProperty(property, item, pageAxis, '');
        });
    }
    property.isSetTheme = true;
};

export default React.memo((props) => {
    const { property, view, pageId, pageAxis } = Base.getProps(props);

    setTheme(property, pageAxis);

    getIsVisible(property, pageAxis);

    property.getView = () => view;

    useEffect(() => {
        pageAxis.getReactComponent = getReactComponent;
    }, [property, pageAxis]);

    return getReactComponent(property, view, pageId);
});